import React, { useState, useEffect, useRef } from 'react'
import './RotateList.css'
import axios from "../../http/index";

const RotateList = (props) => {
  const [column,SetColumn] = useState([])
  const [Data, SetData] = useState([])
  let Num = props.TheList
  const GetData = () => {
    axios({
      url: "/data/board",
      method: "GET",
      data: {
        currentPage: 1
      },
    })
    .then((res) => {
      if (Num === 1) {
        SetColumn(res.data.rotateList1.rotatecolumn)
        SetData(res.data.rotateList1.rotateData)
      }
      else {
        SetColumn(res.data.rotateList2.rotatecolumn)
        SetData(res.data.rotateList2.rotateData)
      }
    })
    .catch((err) => {
      console.log(err);
    });
  }
  
  useEffect(() => {
    GetData()
  }, [])


  const [isScrolle, setIsScrolle] = useState(true);

  /** 滚动速度，值越小，滚动越快 */
  const speed = 30;
  const warper = useRef();
  /** 原数据 */
  const childDom1 = useRef();
    // 开始滚动
    useEffect(() => {
      let timer;
      if (isScrolle) {
          timer = setInterval(()=>{
              warper.current.scrollTop >= childDom1.current.scrollHeight
              ? (warper.current.scrollTop = 0)
              : warper.current.scrollTop++;
          }, speed);
      }
      return () => {
        clearTimeout(timer);
      };
    }, [isScrolle]);

  return (
    <>
      <div className="RotateList" ref={warper}>
        <table className="RotateList_Table" >
          <thead>
            <tr className="RotateList_Head">
              { 
                column.map((item,index) => {
                  return <th key={index}>{item.title}</th>
                })
              }
            </tr>
          </thead>
          <tbody ref={childDom1}>
            {
              Data.map((item,index) => {
                return (
                  <tr className="RotateList_Body" key={index}>
                    {
                      Object.values(item).map((item) => {
                        return (<td key={item}>{item}</td>)
                      })
                    }
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </div>
    </>
  )
}

export default RotateList